<template>
    <div class="nav-header">
        <div class="left">
            <slot name="left"></slot>
        </div>
        <div class="mid">
            <slot name="mid">猫眼电影</slot>
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
        <NavList v-if="isListShow"></NavList>
    </div>
</template>

<script setup>
import { defineProps } from "@vue/runtime-core";
import NavList from "components/common/NavList/inedx.vue";

defineProps({
    isListShow: {
        type: Boolean,
        default: function () {
            return false;
        },
    },
});
</script>

<style lang="less" scoped>
.nav-header {
    height: 50px;
    background-color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: center;
    div {
        color: @text-color;
    }
    .left {
        .text-left();
    }
    .right {
        .text-right();
    }
    .left,
    .right {
        width: 52px;
        position: relative;
    }
    .mid {
        flex: 1;
        .text-center();
        font-size: 18px;
    }
}
</style>
